<template>
<div>
<!-- 图片上传 -->
<!-- 图片上传 -->

   <el-form size="small " :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm">
  <el-form-item label="店铺名称" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
  <el-form-item label="店铺分店名称" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
  <el-form-item label="身份证号" prop="region">
    <el-input v-model="ruleForm.region"></el-input>
  </el-form-item>
<el-form-item label="联系方式" prop="type">
    <el-input label-width="50px" v-model="ruleForm.type"></el-input>
  </el-form-item>
  <el-form-item label="邀请码" prop="resource">
    <el-input label-width="50px" v-model="ruleForm.resource"></el-input>
  </el-form-item>

<el-form-item label="发货方式" prop="date1">
    <el-radio-group v-model="ruleForm.date1">
      <el-radio label="到店自提"></el-radio>
      <el-radio label="同城配送"></el-radio>
    </el-radio-group>
  </el-form-item>

  <el-form-item label="配送时间" required>
    <el-col :span="11">
      <el-form-item prop="date2">
        <el-time-picker placeholder="请选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
      </el-form-item>
    </el-col>
    <el-col class="line" :span="0.5">-</el-col>
    <el-col :span="11">
      <el-form-item prop="date2">
        <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
      </el-form-item>
    </el-col>
  </el-form-item>
  <el-form-item label="审核备注" prop="desc">
    <el-input type="textarea" v-model="ruleForm.desc"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')" >审核通过</el-button>
    <el-button @click="resetForm('ruleForm')">审核不通过</el-button>
  </el-form-item>
</el-form>
</div>
</template>

<script>
export default {
  data () {
    return {
      imageUrl: '',
      ruleForm: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        type: [],
        resource: '',
        desc: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '请输入身份证号', trigger: 'blur' },
          { min: 17, max: 17, message: '请输入正确的身份证号', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { min: 11, max: 11, message: '请输入正确的手机号', trigger: 'blur' }
        ],
        date1: [
          { required: true, message: '请选择发货方式', trigger: 'change' }
        ],
        date2: [
          { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
        ],
        resource: [
          { required: true, message: '请输入邀请码', trigger: 'blur' },
          { min: 6, max: 6, message: '请输入正确的邀请码', trigger: 'blur' }
        ],
        desc: [
          { required: true, message: '请填写活动形式', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
      // this.$router.push('/audit')
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
      this.$router.push('/audit')
    },
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  }

}
</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
